<template>
  <div class="content-area">
    <div class="area-title" v-if="title">{{ title }}</div>
    <slot></slot>
  </div>
</template>

<script>
export default {
  name: "ContentArea",
  props: {
    title: String
  }
}
</script>

<style lang="scss" scoped>
.content-area {
  .area-title {
    position: relative;
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 12px;

    &::before {
      position: absolute;
      left: 0;
      bottom: 2px;
      content: '';
      width: 30px;
      height: 6px;
      background-color: #57b8fd;
      z-index: -1;
      border-radius: 2px;
    }
  }
}
</style>
